<script setup>
import { ref } from 'vue'
import UseFullscreen from '../components/UseFullscreen.vue'
// import TodoListOld from '../components/Todolistold.vue'
import TodoList from '../components/TodoList.vue'
import { userMouse } from '../utils/mouse'
import rate from '../components/Rate.vue'
import rates from '../components/Rates.vue'
import Count from '../components/Count.vue'
let { x, y }= userMouse()
console.log(x, y)

let scope = ref(3.5)
let name = ref('kcgl')
let show = ref(true)
// function changeRate(val){
//     console.log(val)
//     scope.value = val
// }

function handleCLick(){
    show.value = !show.value 
}
</script>

<template>
    <Count/>
    <rate :value='scope' @update-rate="changeRate">
        <template v-slot:[name]>
            <span style="color:blue;">课程管理</span>
        </template>
        <template style="color:blue;" #header>课程管理123</template>
    </rate>
    <rates v-model="scope" />
    <!-- <rate :value='scope' theme="blue"/>
    <rate :value='scope' theme="green"/>
    <rate :value='scope' theme="yellow"/> -->
    <UseFullscreen />
    <div>home页面</div>
    <h2>再加一个h2标签</h2>
    <!-- <Todo-list-old /> -->
    <TodoList />
    <button @click='handleCLick'>点击</button>
    <!-- <h1 v-if="show">123123</h1> -->
    <transition name="fade">
        <h1 v-if="show">12312312312</h1>
    </transition>
</template>

<style scoped>
.fade-leave-active {
    transition: opacity 0.5s linear;
}
.fade-enter-from,.fade-leave-to { opacity: 0;}
</style>
